<template>
  <div>
    <!-- <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div> -->
    <div class="static" :class="classObj"></div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from "vue";

// const isActive = ref(true)
// const hasError = ref(false)

// 绑定对象不一定要写成内联字面量的形式，也可以绑定对象
// const classObj = reactive({
//   active: true,
//   'text-danger': false
// })

// 我们也可以绑定一个返回对象的计算属性
const isActive = ref(true)
const error = ref(null)

const classObj = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

// 组件上使用 对于只有一个根元素的组件，组件上的class 会自动添加到根元素，并与已有的class合并。
</script>